<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻牌式倒计时</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #1a1a1a;
            font-family: 'Arial', sans-serif;
        }

        .countdown-container {
            text-align: center;
            background: #2a2a2a;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
        }

        .title {
            color: #fff;
            margin-bottom: 2rem;
            font-size: 2em;
        }

        .flip-clock {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .flip-unit-container {
            width: 100px;
            height: 120px;
            position: relative;
            border-radius: 10px;
            background: #333;
            perspective: 400px;
        }

        .top, .bottom, .flip-top, .flip-bottom {
            width: 100%;
            height: 50%;
            position: absolute;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4em;
            font-weight: bold;
            color: #fff;
            background: #444;
        }

        .top {
            background: #555;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom: 1px solid #000;
        }

        .bottom {
            bottom: 0;
            background: #444;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            line-height: 0;
        }

        .flip-top, .flip-bottom {
            transition: transform 0.6s;
            transform-origin: bottom;
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }

        .flip-top {
            background: #555;
            transform-origin: bottom;
        }

        .flip-bottom {
            bottom: 0;
            transform-origin: top;
            transform: rotateX(90deg);
        }

        .flip {
            animation: flip-down 0.6s ease-in;
            transform-origin: bottom;
        }

        @keyframes flip-down {
            0% {
                transform: rotateX(0);
            }
            100% {
                transform: rotateX(-180deg);
            }
        }

        .label {
            color: #fff;
            font-size: 1.2em;
            margin-top: 10px;
            opacity: 0.7;
        }

        .unit-container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <h1 class="title">2025年春节倒计时</h1>
        <div class="flip-clock">
            <div class="unit-container">
                <div class="flip-unit-container">
                    <div class="top" id="days-top">00</div>
                    <div class="bottom" id="days-bottom">00</div>
                </div>
                <div class="label">天</div>
            </div>
            <div class="unit-container">
                <div class="flip-unit-container">
                    <div class="top" id="hours-top">00</div>
                    <div class="bottom" id="hours-bottom">00</div>
                </div>
                <div class="label">时</div>
            </div>
            <div class="unit-container">
                <div class="flip-unit-container">
                    <div class="top" id="minutes-top">00</div>
                    <div class="bottom" id="minutes-bottom">00</div>
                </div>
                <div class="label">分</div>
            </div>
            <div class="unit-container">
                <div class="flip-unit-container">
                    <div class="top" id="seconds-top">00</div>
                    <div class="bottom" id="seconds-bottom">00</div>
                </div>
                <div class="label">秒</div>
            </div>
        </div>
    </div>

    <script>
        function updateFlip(elementId, value) {
            const topElement = document.getElementById(`${elementId}-top`);
            const bottomElement = document.getElementById(`${elementId}-bottom`);
            
            if (topElement.textContent !== value) {
                const flipTop = document.createElement('div');
                flipTop.className = 'flip-top flip';
                flipTop.textContent = topElement.textContent;
                
                const flipBottom = document.createElement('div');
                flipBottom.className = 'flip-bottom';
                flipBottom.textContent = value;
                
                const container = topElement.parentElement;
                container.appendChild(flipTop);
                container.appendChild(flipBottom);
                
                setTimeout(() => {
                    topElement.textContent = value;
                    bottomElement.textContent = value;
                    container.removeChild(flipTop);
                    container.removeChild(flipBottom);
                }, 600);
            }
        }

        function updateCountdown() {
            const targetDate = new Date('2026-02-17T00:00:00'); // 2026年春节
            const now = new Date();
            const diff = targetDate - now;

            if (diff <= 0) {
                document.querySelector('.title').textContent = '新年快乐！';
                return;
            }

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            updateFlip('days', days.toString().padStart(2, '0'));
            updateFlip('hours', hours.toString().padStart(2, '0'));
            updateFlip('minutes', minutes.toString().padStart(2, '0'));
            updateFlip('seconds', seconds.toString().padStart(2, '0'));
        }

        // 初始更新
        updateCountdown();
        // 每秒更新一次
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
